<!-- 充值列表 -->
<template>
  <view class="bigbox">
    <view class="topbox">
      <u-swiper :list="lbList"></u-swiper>
    </view>
    <view style="text-align: right; padding: 20rpx">
      <!-- 重新加载图标 -->
      <u-icon
        color="black"
        name="reload"
        size="40"
        style="cursor: pointer"
      ></u-icon>
    </view>
    <view class="footerbox">
      <template v-if="productList.length > 0">
        <view class="xhz" v-for="ele in productList">
          <view class="xhz-l">
            <van-image
              width="150rpx"
              height="150rpx"
              src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
          </view>
          <view class="xhz-r">
            <view class="bt">爱奇艺会员</view>
            <view class="hswz" style="margin: 20rpx 0"
              >黄金会员 星钻 白金会员
            </view>
            <view class="jgwz">￥ 12.00起</view>
          </view>
        </view>
        <!-- 返回顶部按钮 -->
        <u-back-top :scroll-top="scrollTop"></u-back-top>
      </template>
      <view v-else>
        <van-empty description="暂无内容" />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, ref, computed, nextTick, watch } from 'vue'
import { onLoad, onReady, onPageScroll } from '@dcloudio/uni-app'
import { enumAll } from '@/api'
const productList = ref([{}, {}])
const lbList = ref([
  {
    image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
    title: '昨夜星辰昨夜风，画楼西畔桂堂东'
  },
  {
    image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
    title: '身无彩凤双飞翼，心有灵犀一点通'
  }
])
const scrollTop = ref(0)
//返回顶部,所在的父盒子不能设置高度
onPageScroll((e: any) => {
  scrollTop.value = e.scrollTop
})
</script>
<style lang="scss" scoped>
.bigbox {
  font-size: 24rpx;
  padding: 20rpx;

  .topbox {
    background-color: #fff;
    padding: 20rpx;
    border-radius: 10rpx;
  }
  .footerbox {
    .xhz {
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 10rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
      .xhz-l {
        margin-right: 20rpx;
      }
      .xhz-r {
        .bt {
          font-weight: bold;
        }
      }
    }
  }
}
.overwz {
  //   单行文本省略号
  width: 100%;
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 用省略号表示被截断的文本 */
}
.hswz {
  color: #999;
  font-size: 24rpx;
}
.jgwz {
  color: #fd6135;
}
</style>
